<template>
	<view class="warp">
		<uni-section title="相册框" type="line" padding>
			<view class="grid-dynamic-box">
				<view class="grid-item-box-default-upload"  @click="uploadPhoto" :style="{'backgroundColor': 'white'}">
					<uni-icons type="plusempty" size="30" ></uni-icons>
					<text class="text">默认上传</text>
				</view>
				<uni-grid :column="3" :highlight="true" @change="change">
					<uni-grid-item v-if="dynamicList.length > 0" v-for="(item, index) in dynamicList" :index="index" :key="index">
						<view class="grid-item-box" :style="{'backgroundColor':item.color}">
							<uni-icons type="images" :size="50" color="#777" />
							<text class="text">
								{{ item.text }}
								<view  v-if="item.locked"  @click.stop="lockBtn(item,0)" style="display: inline-block;">
									<uni-icons  type="locked" size="18" color="#999"></uni-icons>
								</view>
								<view v-else @click.stop="lockBtn(item,1)" style="display: inline-block;">
									<uni-icons custom-prefix="iconfont" type="icon-jiesuo_o" size="18"  color="#999"  
									></uni-icons>
								</view>
							</text>
							<view v-if="item.badge" class="grid-dot" @click.stop="deletePhotoKuang(item)">
								<uni-badge :text="item.badge" :type="item.type" />
							</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="grid-item-box"  @click.stop="add" :style="{'backgroundColor': 'white'}">
							<uni-icons type="plusempty" size="30" ></uni-icons>
							<text class="text">添加相册框</text>
						</view>
					</uni-grid-item>
					<uni-popup ref="popup" background-color="#fff" @change="changePopup">
						<view class="popup-content">
							<uni-forms ref="formRef"  :rules="rules"  :modelValue="form" class="uni-forms">
								<uni-forms-item label=""  name="name">
									<uni-easyinput v-model="form.name" placeholder="请输入名称"/>
								</uni-forms-item>
								<uni-forms-item>
									<uni-data-select
										v-model="form.classicId"
										:localdata="range"
										placeholder="请选择分类"
									></uni-data-select>
								</uni-forms-item>
								<uni-forms-item class="btn">
									<button type="primary" size="mini" @click="save(form)">保存</button>
								</uni-forms-item>
							</uni-forms>
						</view>
					</uni-popup>
				</uni-grid>
			</view>
		</uni-section>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
	const uploadPhoto=()=>{
		uni.chooseImage({
			count: 6, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album','camera '], //从相册选择
			success: function (res) {
				console.log(JSON.stringify(res.tempFilePaths));
				//上传完之后直接保存到默认相册框里。
			}
		});
	}
	const lockBtn=(item,type)=>{
		if(type == 0){
			//解锁
			item.locked=false;
		}else if(type == 1){
			//上锁
			item.locked=true;
		}
	}

	const formRef=ref()
	const form=ref({
		name:'',
		classicId:null
	})
	const range=ref(
		[
	      { value: 0, text: "篮球" },
	      { value: 1, text: "足球" },
	      { value: 2, text: "游泳" },
	    ]
	)
	const rules=ref(
	{
		name: {
			rules: [{
				required: true,
				errorMessage: '相框名称不能为空'
			}]
		},
		classicId: {
			rules: [{
				required: true,
				errorMessage: '分类不能为空'
			}]
		}
	})
	const dynamicList = ref([])
	const change=(e)=> {
		let {
			index
		} = e.detail
		/* uni.showToast({
			title: `点击第${index+1}个宫格`,
			icon: 'none'
		}) */
		uni.navigateTo({
			url:'/pages/my/photo/add'
		})
	}
	const save=(item)=>{
		console.log("保存的项目:"+item.name)
		if (dynamicList.value.length < 9) {
			id.value++
			dynamicList.value.push({
				id:id.value,
				url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				text: item.name,
				color: dynamicList.value.length % 2 === 0 ? '#f5f5f5' : "#fff",
				badge: 'x',
				type: "warning",
				locked:false,
			})
			form.value={}
			popup.value.close()
		} else {
			uni.showToast({
				title: '最多添加9个',
				icon: 'none'
			});
		}
	}
	const id=ref(0)
	const popup=ref()
	const add=()=> {
		popup.value.open('center')
	}
	const deletePhotoKuang=(item)=> {
		dynamicList.value.splice(dynamicList.value.indexOf(dynamicList.value[item]) - 1, 1)
	}
	const changePopup=()=>{
		console.log("变化")
	}
</script>

<style lang="scss">
	@import '@/static/iconfont.css';
	.btn{
		text-align: center;
	}
	.uni-forms{
		height: 84%;
		padding: 10%
	}
	.popup-content {
		display: flex;
		align-items: center;
		justify-content: center;
		// padding: 15px;
		height: 100%;
		background-color: #fff;
	}
	.grid-dot {
			position: absolute;
			top: 5px;
			right: 15px;
	}
	.image {
			width: 25px;
			height: 25px;
	}
	.text {
			font-size: 14px;
			margin-top: 5px;
	}
	.grid-item-box {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
	}
	.grid-item-box-default-upload {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
			border: 1px dashed gray;
			margin-bottom: 2%;
			width: 33%;
			height: 80px;
	}
</style>